import { computed, h, reactive, ref } from 'vue';
import { FormRules, NButton, NSpace } from 'naive-ui';
import { Layer } from 'slash-layer';
import form from './AuthTbDeptUpdate.vue';
import httpApi from './httpApi';
import Utils from "@/utils";

/**
 * 视图控制
 */
export const vCtl = reactive({
  addBtn: computed(() => {
    return true;
  }),
  updateBtn: computed(() => {
    return true && checkedRows.value.length == 1;
  }),
  delBtn: computed(() => {
    return true && checkedRows.value.length >= 1;
  }),
});
export const initQuery = {};
export const queryForm = ref<any>(JSON.parse(JSON.stringify(initQuery)));
export const tableRef = ref<any>();

export function reloadTable() {
  if (tableRef.value) {
    tableRef.value.reload();
  }
}

/**
 * 选中的数据
 */
export const checkedRows = ref<any>([]);

/**
 * 选中行
 * @param rows
 */
export async function onCheckedRowEvent(rows: any[]) {
  checkedRows.value = rows;
}

/**
 * 枚举字段
 */
export const enabledTextEnum = reactive({
  1: {
    text: '启用',
    style: 'info',
  },
  0: {
    text: '禁用',
    style: 'error',
  },
});
export const getEnabledTextEnum = (key: number | string) => {
  return enabledTextEnum[key].text || `--`;
};

export const getEnabledStyleEnum = (key: number | string) => {
  return enabledTextEnum[key].style || `--`;
};
export const enabledOptions = computed(() => {
  const temp: any = [];
  Object.keys(enabledTextEnum).forEach(function (key: any) {
    temp.push({
      value: parseInt(key),
      label: enabledTextEnum[key].text,
    });
  });
  return temp.reverse();
});

/**
 * 更新弹框
 * @param row
 */
export async function doUpdateModal(row: any) {
  if (checkedRows.value.length != 1 && !row) {
    Layer.error('请选择数据条目后操作');
    return;
  }
  if (!row) {
    row = {
      id: checkedRows.value[0],
    };
  }
  await Layer.updateForm({
    title: '编辑部门',
    position: 'sm',
    content: {
      component: form,
      props: { ...row },
    },
  } as any);
}

/**
 * 新增
 * @param row
 */
export async function doSaveModal(row: any) {
  console.log('传递的数据:{}', row);
  await Layer.createForm({
    title: '新建部门',
    position: 'sm',
    content: {
      component: form,
      props: {
        fkParentDeptCode: row.deptCode,
      },
    },
  } as any);
  await reloadTable();
}

/**
 * 删除
 * @param row
 */
export async function doDeleteModal(row: any) {
  let ids: any = [];
  if (!row) {
    ids = [...checkedRows.value];
  }
  if (row) {
    ids.push(row.id);
  }

  if (ids.length == 0) {
    Layer.error('请选择要删除的数据条目');
    return;
  }
  await Layer.confirm('您确定删除选中记录么');
  await httpApi.doLogicDeleteEntity(ids);
  await reloadTable();
}

/**
 * 查看表单
 * @param row
 */
export async function doReadModal(row: any) {
  if (checkedRows.value.length != 1 && !row) {
    Layer.error('请选择数据条目后操作');
    return;
  }
  if (!row) {
    row = {
      id: checkedRows.value[0],
    };
  }
  await Layer.readForm({
    title: '编辑',
    content: {
      component: form,
      props: { ...row },
    },
  } as any);
  await reloadTable();
}

/**
 * 列表页面列
 */
export const tableColumns = [
  {
    title: '选中',
    key: 'id',
    type: 'selection',
    fixed: 'left',
    width: 50,
    disabled(row: any) {
      return row.name === 'Edward King 3';
    },
  },
  {
    title: '部门名称',
    key: 'deptName',
    sorter: 'deptName',
    width: 150,
  },
  {
    title: '部门编码',
    key: 'deptCode',
    sorter: 'deptCode',
    width: 150,
  },
  {
    title: '上级部门编码',
    key: 'fkParentDeptCode',
    sorter: 'fkParentDeptCode',
    width: 150,
  },
  {
    title: '完整部门编码',
    key: 'fullDeptCode',
    sorter: 'fullDeptCode',
    width: 150,
  },
  {
    title: '完整部门名称',
    key: 'fullDeptName',
    sorter: 'fullDeptName',
    width: 150,
  },
  {
    title: '部门负责人账号',
    key: 'fkLeaderUserAccount',
    sorter: 'fkLeaderUserAccount',
    width: 150,
  },
  {
    title: '显示顺序',
    key: 'orderIndex',
    sorter: 'orderIndex',
    width: 150,
  },

  {
    title: '创建时间',
    key: 'createTime',
    width: 160,
    sorter: 'createTime',
  },
  {
    title: '更新时间',
    key: 'updateTime',
    width: 160,
    sorter: 'updateTime',
  },

  {
    title: '操作',
    key: 'id',
    type: 'id',
    fixed: 'right',
    width: 160,
    render: function (row: any) {
      return h(NSpace, [
        h(
          NButton,
          {
            onVnodeMounted: async (vNode: any) => {
              //await checkAuthShow(vNode.el as any, "1P76CZFAXE");
            },
            type: 'primary',
            text: true,
            onClick: (async (row: any) => {
              await doUpdateModal(row);
            }).bind(null, row),
          },
          '编辑'
        ),
        h(
          NButton,
          {
            onVnodeMounted: async (vNode: any) => {
              // await checkAuthShow(vNode.el as any, "HT4UR87SIB");
            },
            type: 'primary',
            text: true,
            onClick: (async (row: any) => {
              await doDeleteModal(row);
            }).bind(null, row),
          },
          '删除'
        ),
      ]);
    },
  },
];
/**
 * 新增和更新校验规则
 */
export const formRules = reactive<FormRules>({
  deptName: [{ required: true, validator: (rule, val) => Utils.validSpace(rule, val, '请输入部门名称'), trigger: 'blur' }],
  deptCode: [{ required: true, validator: (rule, val) => Utils.validSpace(rule, val, '请输入部门编码'), trigger: 'blur' }],
  fkParentDeptCode: [{ required: true, message: '请输入上级部门编码', trigger: 'blur' }],
  fullDeptCode: [{ required: true, message: '请输入完整部门编码', trigger: 'blur' }],
  fullDeptName: [{ required: true, message: '请输入完整部门名称', trigger: 'blur' }],
  fkLeaderUserAccount: [{ required: true, validator: (rule, val) => Utils.validSpace(rule, val, '请输入部门负责人账号'), trigger: 'blur' }],
  orderIndex: [{ required: true, message: '请输入显示顺序', trigger: 'blur' }],
});
